Dark Theme CSS
https://gyazo.com/bfa01f5210247698212ea8a71d993909
https://gyazo.com/64971ed28d670a30c90977a2aab0f436
色んなところからUserCSSを頂戴しています、ありがとうございます！
普段しているprivateのプロジェクトで使用している progfay.icon
ThemeはHacker1を使用
Google Chrome バージョン: 63.0.3239.132
2018/02/09に作成
grid-size-range と dropdown-toggle を非表示にする
code:style.css
input.grid-size-range { display: none }
a#dropdownMenuSort.tool-btn.dropdown-toggle { display: none }
Project Titleの色調調整
code:style.css
.quick-launch .project-home .title {
}
.quick-launch .project-home .icon-home::before {
}
ページ内スタイル
code:style.css
.page {
background-color: rgba(230, 235, 255, 0.05);
box-shadow: none;
border: #666 solid 0.5px; border-radius: 5px;
}
fontを変更する
code:style.css
html {
font: 16px/24px Helvetica Neue, Helvetica, Trebuchet MS, Arial, Verdana, Tahoma, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
}
.text {
}
status-barのスタイル変更
code:style.css
.status-bar {
background-color: rgba(255, 255, 255, 0);
border-top-left-radius: 15px;
}
マーカー
こんな感じでマーカーにできるよ
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { padding: 0 3px;
margin: 0 1px;
}
引用
幅を広く設定した
code:style.css
span.quote {
padding: 10px;
width: 100%;
display: block;
}
文字の位置揃えをする
俺がセンタリングだ！
俺が右寄せだ！
俺が左寄せだ！
code:style.css
/* 中央寄せ */
.deco-\| { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.deco-\< { position: absolute; width: 100%; text-align: left }
アイコンを大きくする
progfay.icon 普段より大きいぞ
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 2em }
アイコンをもっと大きくする
progfay.icon こんな感じ
code:style.css
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 7em; height: auto }
箇条書きを控えめにする
こんな感じに - になる
code:style.css
/* 箇条書きを控えめにする */
.line .indent-mark .dot { height: 3px; top: 11px; background-color: #AAA } 画像を左寄せにする
code:style.css
/* 行内の画像を左寄せにする */
.line .text { clear: both; overflow: hidden }
.line img.image { float: left; margin-right: .5em }
チェックボックスになるタグ
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
display: inline-block; width: 0; text-indent: -9999px }
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: FontAwesome; font-size: 120%; text-align: center; vertical-align: middle }
homeのgridを見やすくする
画像をセンタリングしてある
code:style.css
.grid li.page-list-item a .title {
overflow: hidden;
height: 50px;
text-align: center;
font-size: 16px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
align-items: center; /* 縦方向中央揃え */
-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
justify-content: center; /* 横方向中央揃え */
}
.grid .page-list-item:hover {
display: inline-block;
}
/* サムネ画像をフィットさせる */
/* サムネ画像をフィットさせる */
.grid li.page-list-item a .icon {
position: relative;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
margin-bottom: 10px;
max-height: 90px;
max-width: 95%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 40px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.grid li.page-list-item a .hover {
background-color: rgba(0, 0, 0, 0.03);
height: 160px
}
Pinのスタイル変更
code:style.css
.grid li.page-list-item a .pin {
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.3) 50%,
)
}
.grid li.page-list-item a .pin {
right: -3px
}
一覧カードを小さくする
code:style.css
.two-two {
width: 165px !important;
height: 165px !important;
}
.page-list .grid li {
width: 165px !important;
height: 165px !important;
margin: 0 24px 24px 0;
}
.two-two .icon {
padding-top: 0px !important;
width: 165px !important;
height: 165px !important;
}
.grid li.page-list-item a {
background-color: rgba(240, 250, 255, 0.1);
box-shadow: none !important
}
.grid li.page-list-item a .views {
}
.grid li.page-list-item a .header {
padding: 7px 5px !important;
border: none;
background-color: rgba(0, 0, 0, 0)
}
.grid li.page-list-item a .content {
height: 100%;
border-radius: 3px;
border: solid #555 0.5px; }
テロメアをおとなしくする
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
.unread {
}
背景色を変える
code:style.css
body { background-color: #22252D !important } ヘッダーメニューを固定する
code:style.css
/* はりつくメニューバー */
/* @media screen and (min-height: 600px) and (min-width: 768px) { */
body:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
body:not(.presentation) .page-menu {
position: fixed;
top: 90px
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset;
border-bottom: solid #666 0.5px; background-color: rgba(34, 37, 45, 0.8);
}
.dropdown.open .dropdown-menu {
position: absolute;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.page-menu .dropdown.open .dropdown-menu {
position: absolute;
top: 0
}
/* } */
.search-form .form-group input {
background-color: rgba(70, 70, 70, 0.5);
border: solid #333 0.5px; }
.new-button {
background-color: rgb(70, 70, 70);
border: solid #333 0.5px; }
.new-button div {
background-color: #CCC !important; }
a.mobile-pagemenu-toggle {
display: none !important
}
a.mobile-search-toggle {
color: black !important
}
ヘッダーのアイコンをScrapboxから変更する
code:style.css
/* ロゴ変更 */
.navbar .navbar-brand img {
display: none;
}
.navbar-brand:before {
content: '';
background-size: contain;
width: 0;
height: 0;
margin: 10px 16px 0 0;
flex-shrink: 0;
border-radius: 25%;
}
.icon-arrow-down:before {
color: white;
}
見出しとタイトルをかっこよく
code:style.css
.line strong {
display: inline-block;
}
.line strong.level-3 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
}
.line strong.level-5 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 4.5px #BBB; }
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-left: solid 7.5px #999; border-bottom: solid 2px #BBB !important; font-weight: bold;
font-size: 35px;
position: relative; left: -15px;
}
カーソルをカスタマイズ
code:style.css
/* カーソルの幅と色替え */
.cursor {
width: 1.5px;
background-color: rgba(255, 255, 255,.6);
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1;}
}
.cursor-line.with-image {
animation-name: none;
}
同時作業中のユーザのカーソルが点滅しないように設定
code:style.css
/* 同時作業中のユーザのカーソル設定 */
.shared-cursors .cursor { background-color: #309030; animation: none } code:style.css
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
border-right: 3px solid rgba(100, 135, 150, 0.75);
border-bottom: 0.5px dashed rgba(135, 165, 205, 0.45);
box-sizing: border-box;
}
関連リンクを左側に表示する
code:style.css
@media (min-width: 1050px) {
.row-flex .col-page {
max-width: 960px
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center
}
.page-wrapper .page {
width: 700px
}
.page-wrapper .related-page-list {
max-width: 260px
}
.related-page-list .grid .splitter:first-child {
display: none
}
.related-page-list .splitter {
height: 10px !important
}
.related-page-list .relation-label {
height: 50px !important
}
.related-page-list .page-list-item {
height: 50px !important
}
.related-page-list .grid li {
width: 200px!important;
height: 70px !important;
padding: 0 0 0 0!important;
margin: 0 0 5px 0!important
}
.related-page-list .grid .page-list-item .content .title {
font-size: 15px;
background-color: rgba(0, 0, 0, 0);
}
.related-page-list .grid .page-list-item .content .description {
display: none;
}
.related-page-list .grid .page-list-item .hover {
height: 6px;
}
.related-page-list .icon {
display: none !important
}
}
.grid li.splitter.splitter {
width: 45px
}
Linksのlabelの色をおとなしくする
code:style.css
.grid li.relation-label.links .arrow {
}
.grid li.relation-label.links a {
}
.grid li.relation-label.links a .title {
}
.grid li.relation-label a {
}
リンクをわかりやすくする
code:style.css
/* External links */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
コードブロックを見やすくする
code:style.css
/* code blockのフォントを小さくする設定 */
.line span.code-block {
line-height: 20px;
font-size: 90%;
background-color: rgba(30, 20, 10, 0.05);
filter: invert();
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #FFF } 吹き出し
code:style.css
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; } /* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #66F; } 重要な部分を赤くする
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
入力時の文字色と背景色を変更する
code:style.css
textarea#text-input:focus {
background: rgba(0, 0, 0, 0.3);
}
UserCSS.icon
;){kind=link}